<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="企业全称">
      <el-input v-model="form.enterpriseName" />
    </el-form-item>
    <el-form-item label="企业简称">
      <el-input v-model="form.enterpriseillustrate" />
    </el-form-item>
    <el-form-item label="企业LOGO" prop="url">
      <el-upload class="avatar-uploader" action="http://localhost:5012/api/Sheep/FileUpLoad"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="form.enterpriseLogo" :src="form.enterpriseLogo" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="行业标签">
      <el-select v-model="form.industryId1" placeholder="请选择" style="width: 150px;">
        <el-option v-for="item in IndustryData" :key="item.industryId" :label="item.industryName" :value="item.industryId"
          @click="getIndustryData2(item.industryId)" />
      </el-select>
      <el-select v-model="form.industryId2" placeholder="请选择" style="width: 150px;">
        <el-option v-for="item in IndustryData2" :key="item.industryId" :label="item.industryName"
          :value="item.industryId" />
      </el-select>
    </el-form-item>
    <el-form-item label="所在区域">
      <el-select v-model="form.provinceId" placeholder="请选择省份" style="width: 150px;" @change="CityList">
        <el-option v-for="item in provinceData" :key="item.provinceId" :label="item.provinceName"
          :value="item.provinceId" />
      </el-select>
      <el-select v-model="form.cityId" placeholder="请选择城市" style="width: 150px;" @change="CountyList">
        <el-option v-for="item in CityData" :key="item.cityId" :label="item.cityName" :value="item.cityId" />
      </el-select>
      <el-select v-model="form.countyId" placeholder="请选择县城" style="width: 150px;">
        <el-option v-for="item in CountyData" :key="item.countyId" :label="item.countyName" :value="item.countyId" />
      </el-select>
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input v-model="form.fullAddress" />
    </el-form-item>
    <el-form-item label="企业电话">
      <el-input v-model="form.enterprisePhone" />
    </el-form-item>
    <el-form-item label="统一社会信用代码">
      <el-input v-model="form.unifiedsocialcode" />
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="form.description" />
    </el-form-item>
    <el-form-item label="停用企业">
      <el-switch v-model="form.deactivated" />
    </el-form-item>
    <el-form-item label="负责人">
      <el-input v-model="form.head" />
    </el-form-item>
    <el-form-item label="财务负责人">
      <el-input v-model="form.financeHead" />
    </el-form-item>
    <el-form-item label="分管负责人">
      <el-input v-model="form.apartHead" />
    </el-form-item>
    <el-form-item label="可查看人员">
      <el-select v-model="form.myProperty" placeholder="请选择" style="width: 150px;">
        <el-option label="张三" value="1" />
        <el-option label="李四" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="核算单位">
      <el-select v-model="form.accountingunitId1" placeholder="请选择" style="width: 150px;">
        <el-option v-for="item in AccountingunData" :key=item.accountingunitId :label="item.accountingunitName"
          :value="item.accountingunitId" @click="getAccountingunData2(item.accountingunitId)" />
      </el-select>
      <el-select v-model="form.accountingunitId2" placeholder="请选择" style="width: 150px;">
        <el-option v-for="item in AccountingunData2" :key=item.accountingunitId :label="item.accountingunitName"
          :value="item.accountingunitId" />
      </el-select>
    </el-form-item>
    <el-button type="danger" @click="EnterPriseAdd()">保存</el-button>
  </el-form>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type UploadProps } from 'element-plus';
import router from '@/router';
// 添加信息条件
const form = reactive({
  enterpriseName: "",
  enterpriseillustrate: "",
  enterpriseLogo: "",
  industryId1: "",
  industryId2: "",
  provinceId: "",
  cityId: "",
  countyId: "",
  fullAddress: "",
  enterprisePhone: "",
  unifiedsocialcode: "",
  description: "",
  deactivated: false,
  head: "",
  financeHead: "",
  apartHead: "",
  myProperty: "1",
  accountingunitId1: "",
  accountingunitId2: ""
})
//上传图片
const handleAvatarSuccess = (image: any) => {
  form.enterpriseLogo = image;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('格式错误!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('大小不能超过2MB!')
    return false
  }
  return true
}

// 添加信息
const EnterPriseAdd = () => {
  axios.post('http://localhost:5012/api/Sheep/EnterPriseAdd', form).then((res) => {
    if (res.data.code == 0) {
      ElMessage.success('添加成功')
      router.push('/UnitList')
    }
    else {
      ElMessage.error('添加失败')
      return;
    }
  })
}
// 省份显示信息
const provinceData = ref([]);
const ProviceList = () => {
  axios.post('http://localhost:5012/api/Sheep/ProviceList', {}).then(res => {
    console.log(res.data);
    provinceData.value = res.data.data;
  })
}
// 市区显示信息
const CityData = ref([]);
const CityList = () => {
  axios.post('http://localhost:5012/api/Sheep/CityList', {
    provionId: form.provinceId
  }).then(res => {
    console.log(res.data);
    CityData.value = res.data.data;
  })
}
// 区县显示信息
const CountyData = ref([]);
const CountyList = () => {
  axios.post('http://localhost:5012/api/Sheep/CountyList', {
    cityId: form.cityId
  }).then(res => {
    console.log(res.data);
    CountyData.value = res.data.data;
  })
}

// 行业标签显示(一级)
const IndustryData = ref([]);
const IndustryList = () => {
  axios.post('http://localhost:5012/api/Sheep/IndustryList', {
    industryId: 0
  }).then(res => {
    console.log(res.data);
    IndustryData.value = res.data.data;
  })
}
// 行业标签显示(二级)
const IndustryData2 = ref([]);
const getIndustryData2 = (id: any) => {
  axios.post('http://localhost:5012/api/Sheep/IndustryList', {
    industryId: id
  }).then(res => {
    console.log(res.data);
    IndustryData2.value = res.data.data;
  })
}

// 核算单位显示(一级)
const AccountingunData = ref([]);
const AccountingunList = () => {
  axios.post('http://localhost:5012/api/Sheep/AccountingunList', {
    accountingunitId: 0
  }).then(res => {
    console.log(res.data);
    AccountingunData.value = res.data.data;
  })
}
// 核算单位显示(二级)
const AccountingunData2 = ref([]);
const getAccountingunData2 = (id: any) => {
  axios.post('http://localhost:5012/api/Sheep/AccountingunList', {
    accountingunitId: id
  }).then(res => {
    console.log(res.data);
    AccountingunData2.value = res.data.data;
  })
}
// 生命钩子
onMounted(() => {
  // 省份显示信息
  ProviceList();
  // 行业标签显示(一级)
  IndustryList();
  // 核算单位显示(一级)
  AccountingunList();
})
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>